.wrapper {
  height: 100vmax;
  padding: 0.1px;
}
.navigation_bar {
  margin-top: 50px;
  width: 100%;
  height: 30px;
  padding-bottom: 0.1px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.navigation_title {
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  margin-top: 10px;
}
.return_btn {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50px;
  left: 10px;
  z-index: 2;
}
.return {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50px;
  left: 10px;
  z-index: 2;
}
.filter_btn {
  margin: auto;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page_filter {
  width: 100%;
  height: 100vmax;
  position: absolute;
  transition: all 0.3s;
  left: 100%;
  top: 0;

  &.show {
    left: 0;
  }
  &.exit {
    left: -100%;
  }
}
.page_1 {
  width: 100%;
  height: 100vmax;
  background-color: lightblue;
  position: absolute;
  left: 100%;
  top: 0;
  transition: all 0.5s;

  &.show {
    left: 0;
  }

  &.exit {
    left: -100%;
  }
}

.page_2 {
  width: 100%;
  height: 100vmax;
  background-color: lightgreen;
  position: absolute;
  left: 100%;
  top: 0;
  transition: all 0.5s;

  &.show {
    left: 0;
  }

  &.exit {
    left: -100%;
  }
}

.page_3 {
  width: 100%;
  height: 100vmax;
  background-color: lightcoral;
  position: absolute;
  left: 100%;
  top: 0;
  transition: all 0.5s;

  &.show {
    left: 0;
  }

  &.exit {
    left: 100%;
  }
}